<template>
  <div>
    <h1>Vue3</h1>
    <h2>a: {{ a }}</h2>
    <h2>douA: {{ douA }}</h2>
    <!-- 这里不需要. 因为模板帮你处理了-->
    <button @click="a++">+1</button>
    <button @click="handleAdd">+1</button>
    <h2>b: {{ b.name }}---{{ b.age }}</h2>
    <button @click="b.age++">age++</button>
    <button @click="handleAddAge">handleAddAge</button>
  </div>
</template>



<script setup lang="ts">
// 组合式 composition api
import { reactive, ref, computed, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

// 路由跳转
const router = useRouter()
// 路由信息
const route = useRoute()


console.log(router, route)

// 变量声明 推荐ref
const a = ref(1);
const b = reactive({
  name: '张三',
  age: 18
})


// 计算属性
const douA = computed(() => a.value * 2)

// 方法
const handleAdd = () => {
  // ref 声明必须访问 value 修改
  a.value++
}

const handleAddAge = () => {
  // reactive 正常访问即可
  b.age++
}


// 侦听器
watch(a, (newValue, oldValue) => {
  console.log('a:', oldValue, '=>', newValue)
}, {
  // 深度
  deep: true,
  // 立即
  immediate: true
})

console.log(document.querySelector('h1'))
onMounted(() => {
  console.log(document.querySelector('h1'))
})


</script>